<template>
  <v-app>
    <GoBackTopbar title="填写订单" backTo="/shoppingCart" />
    <v-content class="px-2 my-2 grey lighten-3">
      <UserAddressInfo />
      <ProductListInfo class="mt-2" />
      <AmountInfo class="mt-2" />
      <PaymentMethod ref="paymentMethod" class="mt-2" />
      <Bottombar @onSubmitOrder="handleSubmitOrder" />
      <v-snackbar top color="info" :timeout="2000" v-model="showMessage">
        {{ errorMessage }}
      </v-snackbar>
      <v-overlay :value="showOverlay">
        <v-progress-circular indeterminate size="64"></v-progress-circular>
      </v-overlay>
    </v-content>
  </v-app>
</template>

<script>
import GoBackTopbar from '@/components/GoBackTopbar.vue';
import UserAddressInfo from './components/UserAddressInfo.vue';
import ProductListInfo from './components/ProductListInfo.vue';
import AmountInfo from './components/AmountInfo.vue';
import Bottombar from './components/Bottombar.vue';
import PaymentMethod from './components/PaymentMethod.vue';
import request from '@/request';

export default {
  name: 'fill-order',
  components: {
    GoBackTopbar,
    UserAddressInfo,
    ProductListInfo,
    AmountInfo,
    PaymentMethod,
    Bottombar
  },
  data() {
    return {
      errorMessage: '',
      showMessage: false,
      showOverlay: false
    };
  },
  methods: {
    handleSubmitOrder() {
      const paymentMethod = this.$refs.paymentMethod.paymentMethod;
      if (this.$store.state.defaultReceiveAddress.name === '') {
        this.showErrorMessage('请添加一个收货地址');
        return;
      } else if (paymentMethod === '') {
        this.showErrorMessage('请选择支付方式');
        return;
      }
      const receiver = this.$store.state.defaultReceiveAddress;
      const data = {
        appUserId: this.$store.state.currentUser.id,
        appUserName: this.$store.state.currentUser.username,
        totalAmount: this.$store.state.currPayableTotalAmount,
        payType: 0,
        sourceType: 1,
        status: 0,
        orderType: 0,
        receiverName: receiver.name,
        receiverPhone: receiver.tel,
        receiverPostCode: receiver.postCode,
        receiverProvince: receiver.province,
        receiverCity: receiver.city,
        receiverRegion: receiver.region,
        receiverDetailAddress: receiver.detailAddress,
        confirmStatus: 0,
        deleteStatus: 0,
        cartItems: this.$store.state.currSettlingProducts
      };
      console.log(data);
      this.showOverlay = true;
      request.post('/orders/create', data).then(resp => {
        this.$router.push(`/payment?id=${resp.id}`);
        this.showOverlay = false;
      });
    },
    showErrorMessage(message) {
      this.errorMessage = message;
      this.showMessage = true;
    }
  }
};
</script>

<style lang="less" scoped>
.v-content > div > div.v-card {
  border-radius: 10px;
}
</style>
